$(function () {

    year_option = {
        title : {
            text: '年收支报表',
            subtext: '元'
        },
        tooltip : {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['收入','支出'],
                splitLine:{
                    show:false
                },
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:false
                },
                splitArea:{
                    show:true,
                },
            }
        ],
        series : [
            {
                name:'金额',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                },
                itemStyle:{
                    normal:{
                        color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                    }
                },
                data:[32.6, 25.9],
            }
        ]
    };

    jidu_option = {

        title : {
            text: '季支出报表',
            subtext: '元'
        },
        tooltip : {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['第一季度','第二季度','第三季度','第四季度'],
                splitLine:{
                    show:false
                },
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:false
                },
                splitArea:{
                    show:true,
                },
            }
        ],
        series : [
            {
                name:'支出',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                },
                itemStyle:{
                    normal:{
                        color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                    }
                },
                data:[32.612, 25.9, 39.0, 26.4],
            },
            {
                name:'收入',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                },
                itemStyle:{
                    normal:{
                        color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                    }
                },
                data:[32.6, 25.9, 39.0, 26.4],
            }
        ]
    };


    mon_option = {
        title : {
            text: '月收支报表',
            subtext: '元'
        },
        tooltip : {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                splitLine:{
                    show:false
                },
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitLine:{
                    show:false
                },
                splitArea:{
                    show:true,
                },
            }
        ],
        series : [
            {
                name:'支出',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        "textStyle": {
                            "color": "#333",
                            "fontSize":5
                        },
                        position:'top',
                        "fontSize":2
                    }
                },
                itemStyle:{
                    normal:{
                        color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                    }
                },
                data:[32.6, 25.9, 39.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3],
            },
            {
                name:'收入',
                type:'bar',
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                },
                itemStyle:{
                    normal:{
                        color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                    }
                },
                data:[32.6, 25.9, 39.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3],
            }
        ]
    };


    $("#yearBtn").addClass("active");
    $("#monBtn").addClass("vist");
    $("#jiduBtn").addClass("vist");
    var myChart = echarts.init(document.getElementById('shouzhi_rep'));
    myChart.setOption(year_option);


    $("#yearBtn").click(function () {
        $("#yearBtn").addClass("vist");
        $("#yearBtn").addClass("active");
        $("#monBtn").removeClass("active");
        $("#jiduBtn").removeClass("active");
        $("#yearSelct").show();
        $("#monSelct").hide();
        $("#jiduSelct").hide();
        var myChart = echarts.init(document.getElementById('shouzhi_rep'));
        myChart.setOption(year_option);
    });
    $("#monBtn").click(function () {

        $("#monBtn").addClass("active");
        $("#yearBtn").removeClass("active");
        $("#jiduBtn").removeClass("active");
        $("#yearSelct").show();
        $("#monSelct").show();
        $("#jiduSelct").hide();
        $(this).css("width","200px;")

        var myChart = echarts.init(document.getElementById('shouzhi_rep'));
        myChart.setOption(mon_option);
    });
    $("#jiduBtn").click(function () {

        $("#jiduBtn").addClass("active");
        $("#yearBtn").removeClass("active");
        $("#monBtn").removeClass("active");
        $("#yearSelct").show();
        $("#monSelct").hide();
        $("#jiduSelct").show();
        var myChart = echarts.init(document.getElementById('shouzhi_rep'));
        myChart.setOption(jidu_option);
    });






})